<template>
  <view class="login-layout">
    <my-header background-color="transparent"></my-header>
    <my-content class="content">
      <view class="title">
        <view class="header_title">您好</view>
        <view class="header_remark">欢迎来到Tiger潮赏</view>
      </view>


      <view class="login_btn" @click="header('/pages/user/login')" v-if="loginType == 1">手机号登录</view>
      <view class="login_btn" @click="mini_login()" v-if="loginType == 0">微信登录</view>

      <view class="agree_box">
        <image mode="heightFix" @click="changeAgree()" v-if="agreeStatus" class="agree_icon"
          src="https://www.dingxians.cn/images/common/selected.png"></image>
        <image mode="heightFix" @click="changeAgree()" v-else class="agree_icon"
          src="https://www.dingxians.cn/images/common/unselected.png"></image>
        <view class="agree_title">
          我已阅读并同意
          <text class="agree_text" @click="header('/packageB/content/user')">《用户协议》</text>
          <text class="agree_text" @click="header('/packageB/content/privacy')">《隐私协议》</text>
        </view>
      </view>
    </my-content>
    <tfgg-verify @result="verifyResult" ref="verifyElement"></tfgg-verify>

    <!-- 小程序获取头像昵称弹窗 -->
    <uni-popup ref="getnickshow" type="bottom" :show="getnickshow" round='16rpx' :mask-close-able="false">
      <view class="getnickbox">

        <view class="flex_align_center">
          <image :src="project.logo" class="logoimg" mode="aspectFit"></image>
          <view class="name">
            {{ project.name }}
            <text>申请</text>
          </view>
        </view>
        <view class="m1 mt30">获取你的头像、昵称</view>
        <view class="m2">展示个人信息</view>
        <view class="xin1">
          <button type="default" class="flex_spacebetween buttoncss" open-type="chooseAvatar"
            @chooseavatar="chooseavatar">
            <view class="flex_align_center toubox">
              <view class="t1">头像</view>
              <image v-if="avatarUrl == ''" src="https://kimi.dingxians.cn/upload/images/user/avatar.png"
                class="avatarimg">
              </image>
              <image v-else :src="avatarUrl" class="avatarimg"></image>
            </view>
            <u-icon name="arrow-right" size="25" color="#999"></u-icon>
          </button>
        </view>
        <view class="nick">
          <view class="n1">昵称:</view>
          <input type="nickname" @blur="bindBlur" v-model="wxNickname" placeholder="点击获取昵称">
        </view>
        <view class="nick">
          <view class="n1">手机号:</view>
          <button class="phone_box" open-type="getPhoneNumber" @getphonenumber="headgetphonenumber">

            <text class="dhh_box" v-if="phoneNumber">{{ phoneNumber || '' }}</text>
            <text v-else>点击获取手机号</text>
          </button>

        </view>
        <view class="enter_box" @click="loginWeixin">
          确认
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import api from '../../api/index.js'
import tfggVerify from '@/components/tfgg-verify/tfgg-verify.vue'
export default {
  components: {
    tfggVerify,
  },
  data() {
    return {
      agreeStatus: false,
      project: {//小程序名字/logo
        name: '',
        logo: '',
      },
      avatarUrl: '',//获取的用户头像
      wxNickname: "",
      phoneNumber: '',
      token: '',
      loginType: 1,
    }
  },
  onLoad(option) { },
  onShow() {
    this.usersHide_wx_login()
  },
  computed: {
  },

  methods: {

    // 登录方式
    usersHide_wx_login() {
      api.users
        .usersHide_wx_login()
        .then((res) => {
          if (res.code == 200) {
            this.loginType = res.msg
          }
        })
    },
    back() {
      uni.navigateBack()
    },
    mini_login() {
      if (this.agreeStatus) {
        let that = this
        uni.login({
          provider: 'weixin',
          success: (res) => {
            console.log(res, 'token登录')
            that.getUser(res.code)
          },
          fail: function (err) {
            console.log("登录授权失败", err);
          }
        })
      } else {
        this.show('请先阅读并同意协议')
      }

    },
    // 登录
    getUser(js_code) {
      console.log(js_code)
      let data = {
        js_code,
        scene: uni.getStorageSync('bind_id')
      }
      console.log(data)
      api.users
        .usersMini_login(data)
        .then((res) => {
          if (res.code === 200) {
            this.token = res.data.token
            if (res.data.is_mobile) {
              uni.hideLoading()
              uni.setStorageSync("sx", true)
              uni.setStorageSync("token", this.token)
              uni.setStorageSync('userInfo', res.data)
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }, 600)
            } else {
              this.$refs.getnickshow.open()
            }

          }
        })
    },
    // 获取小程序的 logo 和 名称
    getProgram() {
      uni.getSystemInfo({
        success: (res) => {
          console.log(res)
          this.project.name = res.appName
        }
      })
      this.project.logo = __wxConfig.accountInfo.icon
    },
    // 获取头像
    chooseavatar(e) {
      let file = e.detail.avatarUrl
      var uploadurl = "https://www.dingxians.cn/api/common/upload?token=" + this.token
      uni.uploadFile({
        url: uploadurl,
        filePath: file,
        name: 'file',
        // formData: {
        //     'openid': this.openId
        // },
        success: (res) => {
          let urlData = JSON.parse(res.data)
          this.avatarUrl = urlData.data.url
        }
      });
    },
    // 获取昵称
    bindBlur(e) {
      this.wxNickname = e.detail.value
    },
    // 获取手机号
    headgetphonenumber(e) {
      let data = {
        token: this.token,
        code: e.detail.code
      }
      api.users.usersGetMobile(data)
        .then((res) => {
          if (res.code === 200) {
            this.phoneNumber = res.mobile
          }
        })
    },
    // 确认微信登录
    loginWeixin() {
      if (this.nickname == '' && this.file == '' && this.phoneNumber == '') {
        this.$msg('请获取头像，昵称，手机号')
      } else if (this.wxNickname == '') {
        this.$msg('请输入昵称')
      } else if (this.avatarUrl == '') {
        this.$msg('请选择头像')
      } else if (this.phoneNumber == '') {
        this.$msg('请输入手机号')
      } else {
        this.editInfo()
      }
    },
    // 修改信息
    editInfo() {
      let data = {
        token: this.token,
        nickname: this.wxNickname,
        avatar: this.avatarUrl,
      }
      api.users
        .update(data)
        .then((res) => {
          if (res.code === 200) {
            // this.$Request.put(this.$api.users.update + '?token=' + `${this.token}`, data).then(res => {
            //   if (res.code == 200) {
            this.show('登录成功')
            uni.setStorageSync("sx", true)
            uni.setStorageSync("token", this.token)
            uni.setStorageSync('userInfo', res.data)
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/index/index'
              })
            }, 600)
          }
        })

    },
    changeAgree() {
      this.agreeStatus = !this.agreeStatus
    }
  },
}
</script>

<style lang="scss" scoped>
.login-layout {
  background-image: url('https://www.dingxians.cn/upload/user_static/user/bg.png');
  background-size: 100% 100%;
  height: 100vh;
}

.header {
  height: 500rpx;
  background-color: #DED000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // align-items: center;
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;

  .header_back {
    width: 65rpx;
    height: 65rpx;
    margin-left: 40rpx;
    margin-top: 80rpx;
  }

  .header_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 80rpx;

    .header_title {
      margin-bottom: 20rpx;
      margin-left: 40rpx;
    }

    .header_remark {
      margin-left: 40rpx;
    }
  }
}

.title {
  margin: 100rpx 60rpx;
  font-size: 50rpx;
  color: white;

}

.login_box {
  display: flex;
  flex-direction: column;
  margin: 80rpx 60rpx 0 60rpx;

  .login_item {
    // height: 120rpx;
    // line-height: 120rpx;
    background-color: #292A2E;
    height: 108rpx;
    line-height: 108rpx;
    color: white;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 56rpx;
    padding: 0 32rpx;

    /* padding-bottom: 20rpx; */
    &:last-child {
      margin-bottom: 76rpx;
    }

    .login_item_text {
      font-size: 34rpx;
      margin-right: 40rpx;
      color: #000;
      font-weight: bold;
    }

    .login_item_input {
      font-size: 34rpx;

      &::placeholder {
        color: #808080;
        font-size: 32rpx;
      }
    }

    .code {
      font-size: 30rpx;
      color: #DED000;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 40rpx;
    }
  }
}

.agree_box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin: 56rpx 0 20rpx 0;
  color: white;

  .agree_icon {
    height: 30rpx;
    margin-right: 10rpx;
  }

  .agree_title {
    display: flex;
    align-items: center;
    justify-content: center;

    .agree_text {
      color: #DED000;
    }
  }
}

.login_btn {
  /* background-color: @color; */
  width: 610rpx;
  border-radius: 10rpx;
  text-align: center;
  height: 84rpx;
  line-height: 84rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
  color: #fff;
  background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
  background-size: 100% 100%;

  &.un_complete {
    filter: grayscale(1);
  }
}




// 小程序获取昵称头像弹窗
.getnickbox {
  padding: 40rpx 20rpx;
  border-radius: 30rpx 30rpx 0 0;
  background-color: #fff;

  .logoimg {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
  }

  .name {
    margin-left: 20rpx;

    text {
      margin-left: 10rpx;
    }
  }

  .m1 {
    font-weight: 500;
  }

  .m2 {
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f2f2f2;
    color: #999;
    padding-top: 10rpx;
    font-size: 24rpx;
  }

  .xin1 {
    border-bottom: 1rpx solid #f2f2f2;
    margin-bottom: 30rpx;

    .toubox {
      padding: 10rpx 0;
      display: flex;
      align-items: center;

      .t1 {
        font-size: 28rpx;
        margin-right: 30rpx;
      }

      .avatarbox {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        border: 1rpx solid #f2f2f2;
      }

      .avatarimg {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
    }
  }


  .buttoncss {
    background-color: #fff;
    border-radius: 0px;
    border: 0rpx solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  button::after {
    border: 0px solid rgba(0, 0, 0, .2);
  }

  .nick {
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid #f2f2f2;
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 14px;
    margin-bottom: 10rpx;

    .n1 {
      font-size: 28rpx;
      margin-right: 30rpx;
    }

    .phone_box {
      background: none;
      width: 530rpx;
      font-size: 28rpx;
      color: #999;
      text-align: left;
      padding-left: 0;
    }

    .dhh_box {
      color: #333;
    }
  }

  .enter_box {
    width: 280rpx;
    height: 100rpx;
    border-radius: 20rpx;
    background: rgba(26, 194, 121, 1);
    margin: 10rpx auto;
    text-align: center;
    line-height: 100rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);

  }

  .mt30 {
    margin-top: 30rpx;
  }
}
</style>